@colorRed: rgb(199, 0, 11);
@colorYellow: rgb(252, 200, 0);
@colorlightyellow: rgb(253, 211, 81);
@pageBackgroundColor: #f2f3f5;
@boxShadowLighter: 0px 0px 12px rgba(0, 0, 0, 0.12);

html {
  font-size: 16px;
}
body {
  padding: 0;
  margin: 0;
}
:root {
  --wheel-size: 560;
}
[v-cloak] {
  display: none;
}
#app {
  position: relative;
  height: 100vh;
  overflow: hidden;

  .title {
    text-align: center;
    color: @colorRed;
  }

  .wheel-lucky-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35rem /* 560/16 */;
    height: 35rem /* 560/16 */;
    background-color: @colorRed;
    border-radius: 50%;
    padding: 40px;
    .light {
      position: absolute;
      top: 0.625rem /* 10/16 */;
      left: 50%;
      transform-origin: center 19.375rem /* 310/16 */;
      height: 1.25rem /* 20/16 */;
      width: 1.25rem /* 20/16 */;
      border-radius: 50%;
      &:nth-of-type(even) {
        background-color: #fff;
      }
      &:nth-of-type(odd) {
        background-color: yellow;
      }
    }
    .light-blink-odd {
      animation: blink-odd 1s linear infinite;
    }
    .light-blink-even {
      animation: blink-even 1s linear infinite;
    }

    @keyframes blink-odd {
      25% {
        background: #fff;
        box-shadow: 0px 0px 20px #fff;
      }
    }
    @keyframes blink-even {
      75% {
        background: yellow;
        box-shadow: 0px 0px 20px yellow;
      }
    }

    .wheel-panel {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-color: #fff;
      .prize-item {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        color: @colorRed;
        text-align: center;
      }
    }
    .pointer {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      cursor: pointer;
      width: 5rem /* 80/16 */;
      height: 5rem /* 80/16 */;
      line-height: 5rem /* 80/16 */;
      text-align: center;
      background-color: @colorRed;
      color: @colorYellow;
      font-weight: bold;
      font-size: 1.25rem /* 20/16 */;
      border-radius: 50%;
      &::before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-bottom: 0.625rem /* 10/16 */ solid @colorRed;
        border-left: 0.3125rem /* 5/16 */ solid transparent;
        border-right: 0.3125rem /* 5/16 */ solid transparent;
        left: 0;
        right: 0;
        margin: auto;
        top: -0.625rem /* 10/16 */;
      }
    }
  }

  .text-luck-comp {
    margin-top: 200px;
    text-align: center;
    .text-luck-content {
      display: inline-block;
      width: 96px;
      height: 48px;
      line-height: 48px;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 12px;
      border: 1px solid @colorRed;
      border-radius: 6px;
    }
  }

  .nine-block-luck-comp {
    margin-top: 200px;
    .container {
      display: grid;
      height: 300px;
      width: 300px;
      margin: 0 auto;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto;
      gap: 12px;

      .grid-item {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: @colorYellow;
        border-radius: 6px;
        color: #fff;
        box-sizing: border-box;
        border: 3px solid @colorYellow;

        &:nth-child(5) {
          cursor: pointer;
          border-radius: 50%;

          div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          &:active {
            background-color: #eebe77;
          }
        }

        &.active {
          border-color: @colorRed;
        }
      }
    }
  }

  .setter-btn {
    position: absolute;
    top: 16px;
    left: 16px;

    button {
      margin-right: 8px;
    }
  }
}
